<template>
  <div class="end mbm">
    <a-form-item>
      <a-button @click="showModalPolicy({},$event)" type="primary">+ 新增策略</a-button>
    </a-form-item>
    <a-table :columns="columns" :dataSource="policies" :pagination="false">
        <span slot="nametitle" slot-scope="text,policy">
      <a  @click="showModalPolicy(policy,$event)">{{(policy.silent?"":"[语音] ")+text}}</a>
      </span>
      <span slot="customTitle">
        策略名称
      </span>
      <span slot="intentions" slot-scope="intentions">
        <span>{{intentions}}</span>
      </span>
      <span slot="checked" slot-scope="checked">
        <a-tag
          v-for="(isTrue,tag) in checked"
          :color="isTrue ? 'green' : ''"
          :key="tag"
        >{{checkedCN[tag]}}</a-tag>
      </span>
      <span slot="action" slot-scope="policy">
        <a @click="showModalPolicy(policy,$event)"><a-icon type="setting" class="mri"/>设置</a>
      </span>
    </a-table>

    <a-modal
      :title="modalPolicyTitle"
      :visible="modalPolicyVisible"
      @ok="submitPolicy"
      :confirmLoading="modalPolicyLoading"
      @cancel="cancelModalPolicy"
      :footer="null"
      :mask="true"
      :maskClosable="false"
    >
      <a-form :form="formPolicy" @submit="submitPolicy">
        <a-form-item style="margin-bottom:0" :wrapper-col="{ span: 12 ,offset: 5}">
          <a-checkbox
            :checked="editPolicy.silent"
            @change="check('silent',$event)"
          >{{editPolicy.silent?'本策略会默默的挂断电话':'什么都不说，直接挂断？'}}</a-checkbox>
        </a-form-item>
        <a-form-item
          :label="editPolicy.silent?'策略名称':'结束语音'"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
          extra
        >
          <a-input
            class="talk_input mrm"
            style="width: 300px"
            :placeholder="editPolicy.silent?'请输入方便您自己理解的名称':'请输入挂断通话之前要说的话'"
            v-decorator="['title',{ rules: [{ required: true, message: '这里不能空着哦！' }] }]"
          />
        </a-form-item>
        <a-form-item style="margin-bottom:0" :wrapper-col="{ span: 12 ,offset: 5}">
          <a-row>
            <a-col :span="24">
              <a-checkbox
                :checked="editPolicy.checked.sms"
                @change="check('sms',$event)"
              >{{editPolicy.checked.sms?'已开启短信通知':'短信通知？'}}</a-checkbox>
            </a-col>
            <a-col :span="24">
              <a-checkbox
                :checked="editPolicy.checked.call"
                @change="check('call',$event)"
              >{{editPolicy.checked.call?'已开启电话通知':'电话通知？'}}</a-checkbox>
            </a-col>
            <a-col :span="24">
              <a-checkbox
                :checked="editPolicy.checked.push"
                @change="check('push',$event)"
              >{{editPolicy.checked.push?'已开启推送通知':'推送通知？'}}</a-checkbox>
            </a-col>
            <a-col :span="24">
              <a-checkbox
                :checked="editPolicy.checked.blacklist"
                @change="check('blacklist',$event)"
              >{{editPolicy.checked.blacklist?'自动进入黑名单':'进入黑名单？'}}</a-checkbox>
            </a-col>
          </a-row>
        </a-form-item>

        <a-form-item v-if="editPolicy.id" :wrapper-col="{ span: 12, offset: 5 }">
          <a-button class="mbm" type="primary" html-type="submit">立即修改</a-button>
        </a-form-item>
        <a-form-item v-else :wrapper-col="{ span: 12, offset: 5 }">
          <a-button class="mbm" type="primary" html-type="submit">立即新增</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
const columns = [
  {
    dataIndex: "title",
    key: "title",
    slots: { title: "customTitle" },
    scopedSlots: { customRender: "nametitle" }
  },
  {
    title: "关联意图",
    key: "intentions",
    dataIndex: "intentions",    
  },
  {
    title: "通知/反馈",
    key: "checked",
    dataIndex: "checked",
    scopedSlots: { customRender: "checked" }
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];
const checkedCN = {
    "sms":"短信",
    "call":"电话",
    "push":"推送",
    "blacklist":"拉黑",
};
const policies = [];
export default {
  data() {
    return {
      policies,
      columns,
      checkedCN,
      editPolicy: {},
      modalPolicyVisible: false,
      modalPolicyLoading: false,
      modalPolicyTitle: ""
    };
  },
  created() {
    this.formPolicy = this.$form.createForm(this, {
      name: "form_policy"
    });
    this.editPolicy = this.newPolicy();
  },
  mounted() {
    this.loadPolicy();
  },
  methods: {
    newPolicy(v, k) {
      var policy = {
        key: 0,
        id: 0,
        title: "",
        silent: false,
        intentions:"",
        hits: 0,
        checked: {
          sms: true,
          call: false,
          push: false,
          blacklist: false
        }
      };

      if (typeof v != "undefined") {
          var _intentionsArr = []
          v.intentions.forEach((iv)=>{
            _intentionsArr.push(iv.title)
          })
        policy.key = k ? k : 0;
        policy.id = v.id;
        policy.title = v.title;
        policy.silent = v.silent;
        policy.intentions = _intentionsArr.length >0 ?_intentionsArr.toString().slice(0, 15)+" ...":"-";
        policy.hits = v.hits;
        policy.checked = v.checked;        
      }
      //this.editPolicy = policy;
      return policy;
    },
    loadPolicy() {
      this.$api.setting
        .getPolicyList()
        .then(res => {
          this.policies = [];
          res.forEach((v, k) => {

            this.policies.push(this.newPolicy(v, k));
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    showModalPolicy(v) {
      this.modalPolicyVisible = true;
      if (typeof v.id != "undefined") {
        this.modalPolicyTitle = "修改策略";
        this.editPolicy = v;
      } else {
        this.modalPolicyTitle = "新增策略";
        this.editPolicy = this.newPolicy();
      }
      this.$nextTick(function() {
        this.formPolicy.setFieldsValue({
          title: this.editPolicy.title
        });
      });
    },
    submitPolicy(e) {
      e.preventDefault();
      this.formPolicy.validateFields((err, values) => {
        if (!err) {
          this.$api.setting
            .addOrUpdatePolicy({
              id: this.editPolicy.id,
              title: values.title,
              silent: this.editPolicy.silent,
              checked: this.editPolicy.checked
            })
            .then(() => {
              if (this.editPolicy.key > 0) {
                this.$message.info("挂断策略修改成功！");
              } else {
                this.$message.info("挂断策略新增成功！");
              }
              this.loadPolicy();
              this.modalPolicyVisible = false;
            })
            .catch(err => {
              console.log(err);
            });
        }
      });
    },
    cancelModalPolicy() {
      this.modalPolicyVisible = false;
    },
    check(k, e) {
      if (k == "silent") {
        this.editPolicy.silent = e.target.checked;
      } else {
        this.editPolicy.checked[k] = e.target.checked;
      }
    }
  }
};
</script>